<template>
  <div class="student">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.keyword" placeholder="输入姓名/手机号/账号搜索"></el-input>
      </el-form-item>
      <el-form-item label="加入时间">
        <el-date-picker v-model="sTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="formInline.status" placeholder="账号状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="冻结" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="batchUpdSta('0')">批量冻结</el-button>
        <el-button type="primary" @click="batchUpdSta('1')">批量启用</el-button>
        <el-button type="primary" @click="$router.push({path:'/imports',query:{type:'0'}})">批量导入</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.list" border style="width: 100%" @selection-change="selChange">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column fixed prop="account" label="账号" width="150">
      </el-table-column>
      <el-table-column prop="username" label="姓名">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{scope.row.sex===0?'男':scope.row.sex===1?'女':'未知'}}
        </template>
      </el-table-column>
      <el-table-column label="年级" width="120">
        <template slot-scope="scope">
          <span v-for="item in $root.grade">{{item.id==scope.row.section?item.name:''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160">
        <template slot-scope="scope">
          {{scope.row.createTime |formatTime }}
        </template>
      </el-table-column>
      <el-table-column label="最后编辑时间" width="160">
        <template slot-scope="scope">
          {{scope.row.updateTime |formatTime }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="账号状态">
        <template slot-scope="scope">
          {{scope.row.status===0?'冻结':'正常'}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="write(scope.row)">编辑</el-button>
          <el-button type="text" @click="ids.push(scope.row.authUserId);batchUpdSta(scope.row.status===0?1:0)">{{scope.row.status===0?'启用':'冻结'}}</el-button>
          <el-button type="text" @click="reset(scope.row.authUserId)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :pageIndex='formInline.pageIndex' :total="tableData.total" @getListResult="findUserPage" />
    <el-dialog title="编辑" :visible.sync="showWrite" @close="writeItem={}">
      <el-form ref="form" label-width="80px">
        <el-form-item label="账号 ：">
          <el-input :disabled="true" v-model="writeItem.account"></el-input>
        </el-form-item>
        <el-form-item label="姓名 ：" class="is-required">
          <el-input v-model="writeItem.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号 ：">
          <el-input v-model="writeItem.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别 ：">
          <el-radio-group v-model="writeItem.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年级 ：" class="is-required">
          <el-select v-model="writeItem.section" placeholder="请选择年级">
            <el-option v-for="(item,i) in $root.grade" :label="item.name" :value="item.id" :key="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateUser">确定</el-button>
          <el-button @click="showWrite=false;writeItem={}">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import { Component, Watch } from 'vue-property-decorator'
import Pagination from 'base/Pagination.vue'
import { findUserPage, batchUpdSta, resetPass,updateAuthUser } from 'service/user.ts'
import util from 'assets/js/util'
import storage from 'assets/js/storage'

@Component({
  name: 'student',
  components: {
    Pagination
  },
})
export default class Student extends Vue {
  // data
  ids: any[] = []
  sTime: any[] = []
  formInline: any = {
    keyword: '',
    pageIndex: 1,
    pageSize: 10,
    regTimeStart: '',
    regTimeEnd: '',
    status: null
  };
  writeItem: any = {}
  showWrite: boolean = false
  tableData: any = {};
  @Watch('sTime')
  watchTime(newVal: any[], oldVal: any[]) {
    if (newVal) {
      this.formInline.regTimeStart = util.formatTime(newVal[0], 'YYYY-MM-DD') + ' 00:00:00'
      this.formInline.regTimeEnd = util.formatTime(newVal[1], 'YYYY-MM-DD') + ' 23:59:59'
    } else {
      this.formInline.regTimeStart = ""
      this.formInline.regTimeEnd = ""
    }
  }

  created() {
    this.findUserPage({})
  }
  async write(item: any) {
    console.log(item)
    this.writeItem = {...item}
    this.showWrite = true
  }
  async findUserPage(opt: any) {
    this.$loading({})
    let { data } = await findUserPage({ ...this.formInline, ...opt })
    if (data.success) {
      if (opt && opt.pageIndex) {
        this.formInline.pageIndex = opt.pageIndex
      }
      this.tableData = data.data
      this.$loading({}).close()
    }
  }
  async reset(id: string) {
    this.$confirm('确认重置密码？', '提示').then(async () => {
      let { data } = await resetPass({ userId: id })
      if (data.success) {
        if (!data.success) {
          this.$message(data.data.message)
          return
        }
        this.$message('重置成功')
        this.findUserPage({})
      }
    }).catch(() => {
      this.$message('已取消')
    })

  }
  async batchUpdSta(status: string) {
    if (!this.ids.length) {
      this.$alert('请选择至少一个学员')
      return
    }
    let { data } = await batchUpdSta({ ids: this.ids.join(','), status: status })
    if (data.success) {
      this.ids = []
      this.$message('操作成功')
      this.findUserPage({})
    }
  }
  onSubmit() {
    if (this.formInline.pageIndex === 1) {
      this.findUserPage({})
    } else {
      this.formInline.pageIndex = 1
    }

  }
  selChange(val: any) {
    console.log(val)
    this.ids = []
    val.map((item: any, i: number) => {
      this.ids.push(item.authUserId)
    })
  }
  async updateUser(val: any) {
    if (!this.writeItem.username) {
      this.$message('姓名不可以为空')
      return
    }
    if (this.writeItem.username.length > 20) {
      this.$message('姓名长度不可以超过20字')
      return
    }
    if(this.writeItem.phone){
    if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.writeItem.phone))) {
      this.$message("请输入正确手机号码");
      return
    }
    }
    if(!this.writeItem.section){
      this.$message('请选择年级')
      return
    }
    let {data}= await updateAuthUser(this.writeItem)
    if (data.success) {
      this.$message('保存成功')
      this.findUserPage({})
      this.writeItem={}
      this.showWrite=false
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
